<template>
    <div class="convenients-wrap">
        <div
            v-for="(item, idx) in listData"
            :key="idx"
            :style="{ marginTop: idx !== 0 ? '10px' : 0 }"
            class="card-wrap"
            @click="handleToDetails"
        >
            <image class="img-cover" :src="item.url" mode="scaleToFill" />
            <div class="server-box">
                <div class="title">{{ item.name }}</div>
                <image class="icon" :src="ArrowIcon" mode="scaleToFill" />
            </div>
            <div class="address">地址:{{ item.address }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import ArrowIcon from '@/assets/mine/arrow-right.png'
interface IProps {
    id: Number
    name: string
    address: string
    url: string
}
const listData: IProps[] = [
    {
        id: 1,
        name: '洗衣服务',
        address: '成都市~~~',
        url: 'https://hbimg.b0.upaiyun.com/abcd765093440d36375c8172d399689386db166757972-O8mrLz_fw658'
    },
    {
        id: 2,
        name: '理发服务',
        address: '成都市~~~',
        url: 'https://img2.baidu.com/it/u=3814762419,638738365&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
    },
    {
        id: 2,
        name: '缝补服务',
        address: '成都市~~~',
        url: 'https://img1.baidu.com/it/u=577114546,2771402770&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
    }
]
const handleToDetails=()=>{
    uni.navigateTo({
        url :'/mainPages/storeDetails/index'
    })
}
</script>
<style scoped lang="scss">
.convenients-wrap {
    padding: 10px;
    box-sizing: border-box;
    .card-wrap {
        .img-cover {
            height: 120px;
            width: 100%;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            object-fit: contain;
        }
        .server-box {
            display: flex;
            margin-top: 5px;
            align-items: center;
            justify-content: space-between;
            .title {
                font-size: 14px;
                color: #333;
            }
            .icon {
                width: 18px;
                height: 18px;
            }
        }
        .address {
            font-size: 12px;
            margin-top: 5px;
        }
    }
}
</style>
